<template>
  <div>
    <h1>生成Echarts数据报表</h1>
    <el-form ref="uploadForm" :model="form" label-width="160px">
      <el-form-item label="导入xsl或者xslx文件">
        <input type="file" @change="handleFileUpload" accept=".xls, .xlsx"/>
      </el-form-item>
      <el-button type="primary" @click="uploadFile">下载</el-button>
    </el-form>
    <div v-if="sheets.length > 0">
      <h3>选择工作表</h3>
      <el-select
        v-model="selectedSheet"
        placeholder="选择工作表"
        @change="handleSheetChange">
        <el-option
          v-for="sheet in sheets"
          :key="sheet"
          :label="sheet"
          :value="sheet">
        </el-option>
      </el-select>
      <h2>表数据</h2>
      <el-table :data="pagedSheetData" style="width: 100%">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label">
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="selectedSheetData.length"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-button type="primary" @click="previewData">预览</el-button>
    <div v-if="showChart" style="width: 500px; height: 600px">
      <Pie
        :pieData="pieChartData"
        ref="chart"
        style="width: 600px; height: 400px">
      </Pie>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Pie from "@/components/Pie.vue";

export default {
  name: "HomePage",
  components: {
    Pie,
  },
  data() {
    return {
      form: {
        file: null,
      },
      tableData: {},
      baseUrl: "http://127.0.0.1:3000",
      tableColumns: [],
      selectedSheet: "",
      sheets: [],
      selectedSheetData: [],
      currentPage: 1,
      pageSize: 10,
      showChart: false,  // 控制图表显示的变量
    };
  },
  computed: {
    pagedSheetData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.selectedSheetData.slice(startIndex, endIndex);
    },
    pieChartData() {
      return this.selectedSheetData.map(item => ({
        name: item.任职部门,
        value: item.人数,
      }));
    },
  },
  methods: {
    handleFileUpload(event) {
      this.form.file = event.target.files[0];
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    uploadFile() {
      const formData = new FormData();
      formData.append("file", this.form.file);
      axios.post(`${this.baseUrl}/api/upload`, formData)
        .then((response) => {
          this.tableData = response.data;
          this.sheets = Object.keys(response.data);
          this.selectedSheet = this.sheets[0]; // 自动选择第一个工作表
          this.selectedSheetData = this.tableData[this.selectedSheet]; // 加载第一个工作表的数据
          this.generateTableColumns(this.selectedSheetData[0]);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    generateTableColumns(data) {
      this.tableColumns = [];
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          this.tableColumns.push({
            prop: key,
            label: key.charAt(0).toUpperCase() + key.slice(1),
          });
        }
      }
    },
    handleSheetChange() {
      this.selectedSheetData = this.tableData[this.selectedSheet];
    },
    previewData() {
      this.showChart = true;
      const chartHTML = `<html><body><div style="width: 600px; height: 400px">${this.$refs.chart.innerHTML}</div></body></html>`;
      const newWindow = window.open();
      newWindow.document.write(chartHTML);
    },
  },
  mounted() {
    axios.get(`${this.baseUrl}/sheets`)
      .then((response) => {
        this.sheets = response.data;
        if (this.sheets.length > 0) {
          this.selectedSheet = this.sheets[0]; // 默认选择第一个工作表
        }
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>

<style scoped></style>